<!DOCTYPE html>
<html>
    <head>
        <title>event bind</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <style>
           
        </style>
        <script type="text/javascript">
            avalon.define({
                $id: "test",
                fn1: function(e) {
                    console.log(e.type)
                    console.log(this)
                },
                fn2: function(e) {
                    console.log(e.type)
                    console.log(this)
                }
            })


            var model = avalon.define({
                $id: "test2",
                text: "",
                callback: function(e) {
                    model.text = e.wheelDelta + "  " + e.type
                }
            })

            
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <div ms-mouseenter="fn1" ms-mouseleave="fn2" style="background: red;width:200px;height: 200px;padding:20px;">
                <div style="background: blue;width:160px;height: 160px;margin:20px;"></div>
            </div>
        </div>

        <div ms-controller="test2">
            <div ms-on-mousewheel="callback" id="aaa" style="background: grey;width:200px;height: 200px;">
                {{text}}
            </div>
        </div>

    </body>
</html>
